<template>
    <div>
        <PageHeader title="我的报表" class="">
            <div slot="action">
                <Button type="primary" @click="showModal">自定义数据</Button>
            </div>
        </PageHeader>
        <Row :gutter="24">
            <Col span="4" class="ivu-mb">
                <div @click="actived('add_type')">
                    <Card :class="{active: active === 'add_type'}" :bordered="false" dis-hover :padding="12">
                        <p slot="title"><span class="people">新增患者</span></p>
                        <Tag class="extra" slot="extra" color="green">{{ showDay.add_type }}</Tag>
                        <div>
                            <a><Numeral :value="baseData.add_num" v-font="30" /></a>
                            <Divider style="margin: 8px 0" />
                            <div>
                                <Row>
                                    <Col class="title-iv" span="12">总患者数</Col>
                                    <Col span="12" class="ivu-text-right">{{ baseData.add_all_num }}</Col>
                                </Row>
                            </div>
                        </div>
                    </Card>
                </div>
            </Col>
            <Col span="4" class="ivu-mb">
                <div @click="actived('arrive_type')">
                    <Card :class="{active: active === 'arrive_type'}"  :bordered="false" dis-hover :padding="12">
                        <p slot="title"><span class="people">已到</span></p>
                        <Tag class="extra" slot="extra" color="red">{{ showDay.arrive_type }}</Tag>
                        <div >
                            <a><Numeral :value="baseData.arrive_num" v-font="30" /></a>
                            <Divider style="margin: 8px 0" />
                            <div>
                                <Row>
                                    <Col class="title-iv" span="12">总已到人数</Col>
                                    <Col span="12" class="ivu-text-right">{{ baseData.arrive_all_num }}</Col>
                                </Row>
                            </div>
                        </div>
                    </Card>
                </div>
            </Col>
            <Col span="4" class="ivu-mb">
                <div @click="actived('order_arrive_type')">
                    <Card :class="{active: active === 'order_arrive_type'}"  :bordered="false" dis-hover :padding="12">
                        <p slot="title"><span class="people">预到</span></p>
                        <Tag class="extra" slot="extra" color="blue">{{ showDay.order_arrive_type }}</Tag>
                        <div >
                            <a><Numeral :value="baseData.order_arrive_num" v-font="30" /></a>
                            <Divider style="margin: 8px 0" />
                            <div>
                                <Row>
                                    <Col class="title-iv" span="12">总预到人数</Col>
                                    <Col span="12" class="ivu-text-right">{{ baseData.order_arrive_all_num }}</Col>
                                </Row>
                            </div>
                        </div>
                    </Card>
                </div>
            </Col>
            <Col span="4" class="ivu-mb">
                <div @click="actived('unarrive_type')">
                    <Card :class="{active: active === 'unarrive_type'}" :bordered="false" dis-hover :padding="12">
                        <p slot="title"><span class="people">过期未到</span></p>
                        <Tag class="extra" slot="extra" color="blue">{{ showDay.unarrive_type }}</Tag>
                        <div >
                            <a><Numeral :value="baseData.unarrive_num" v-font="30" /></a>
                            <Divider style="margin: 8px 0" />
                            <div>
                                <Row>
                                    <Col class="title-iv" span="12">总过期未到</Col>
                                    <Col span="12" class="ivu-text-right">{{ baseData.unarrive_all_num }}</Col>
                                </Row>
                            </div>
                        </div>
                    </Card>
                </div>
            </Col>
            <Col span="4" class="ivu-mb">
                <div @click="actived('callback_type')">
                    <Card :class="{active: active === 'callback_type'}" :bordered="false" dis-hover :padding="12">
                        <p slot="title"><span class="people">已回访次数</span></p>
                        <Tag class="extra" slot="extra" color="blue">{{ showDay.callback_type }}</Tag>
                        <div >
                            <a><Numeral :value="baseData.callback_num" v-font="30" /></a>
                            <Divider style="margin: 8px 0" />
                            <div>
                                <Row>
                                    <Col class="title-iv" span="12">总回访次数</Col>
                                    <Col span="12" class="ivu-text-right">{{ baseData.callback_all_num }}</Col>
                                </Row>
                            </div>
                        </div>
                    </Card>
                </div>
            </Col>
            <Col span="4" class="ivu-mb">
                <div @click="actived('uncallback_type')">
                    <Card :class="{active: active === 'uncallback_type'}" :bordered="false" dis-hover :padding="12">
                        <p slot="title"><span class="people">过期未回访</span></p>
                        <Tag class="extra" slot="extra" color="red">{{ showDay.uncallback_type }}</Tag>
                        <div >
                            <a><Numeral :value="baseData.uncallback_num" v-font="30" /></a>
                            <Divider style="margin: 8px 0" />
                            <div>
                                <Row>
                                    <Col class="title-iv" span="12">总未回访数</Col>
                                    <Col span="12" class="ivu-text-right">{{ baseData.uncallback_all_num }}</Col>
                                </Row>
                            </div>
                        </div>
                    </Card>
                </div>
            </Col>
        </Row>
        <Modal v-model="modal" title="自定义数据" draggable>
            <Form :model="formItem" ref="formItem" label-position="left" :label-width="90">
                <FormItem label="新增患者" prop="add_type">
                    <RadioGroup v-model="formItem.add_type">
                        <Radio label="1">今</Radio>
                        <Radio label="2">昨</Radio>
                        <Radio label="3">周</Radio>
                        <Radio label="4">月</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="已到" prop="arrive_type">
                    <RadioGroup v-model="formItem.arrive_type">
                        <Radio label="1">今</Radio>
                        <Radio label="2">昨</Radio>
                        <Radio label="3">周</Radio>
                        <Radio label="4">月</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="预到" prop="order_arrive_type">
                    <RadioGroup v-model="formItem.order_arrive_type">
                        <Radio label="1">今</Radio>
                        <Radio label="2">明</Radio>
                        <Radio label="3">周</Radio>
                        <Radio label="4">月</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="过期未到" prop="unarrive_type">
                    <RadioGroup v-model="formItem.unarrive_type">
                        <Radio label="2">昨</Radio>
                        <Radio label="3">周</Radio>
                        <Radio label="4">月</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="已回访人数" prop="callback_type">
                    <RadioGroup v-model="formItem.callback_type">
                        <Radio label="1">今</Radio>
                        <Radio label="2">昨</Radio>
                        <Radio label="3">周</Radio>
                        <Radio label="4">月</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="过期未访" prop="uncallback_type">
                    <RadioGroup v-model="formItem.uncallback_type">
                        <Radio label="2">昨</Radio>
                        <Radio label="3">周</Radio>
                        <Radio label="4">月</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleDrawerCancel">取消</Button>
                <Button type="primary" :loading="loading" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import { addViewShow } from '@api/setting'
    export default {
        data () {
            return {
                ruleForm: {},
                grid: {
                    xl: 6,
                    lg: 12,
                    md: 12,
                    sm: 12,
                    xs: 24
                },
                excessStyle: {
                    color: '#f56a00',
                    backgroundColor: '#fde3cf'
                },
                modal: false,
                formItem: {
                    add_type: '1',	// 新增
                    arrive_type: '1',	// 已到
                    order_arrive_type: '1',	// 预到
                    unarrive_type: '2', // 过期未到
                    callback_type: '1', // 已回访次数
                    uncallback_type: '2' // 过期未回访
                },
                loading: false,
                profession_id: '',
                showDay: {
                    add_type: '今日',	// 新增
                    arrive_type: '今日',	// 已到
                    order_arrive_type: '今日',	// 预到
                    unarrive_type: '昨日', // 过期未到
                    callback_type: '今日', // 已回访次数
                    uncallback_type: '昨日' // 过期未回访
                },
                createdList: [],
                active: 'order_arrive_type'
            }
        },
        props: ['baseData', 'localList'],
        created () {
            addViewShow().then(res => {
                this.createdList = res
                this.profession_id = res.profession_id
            })
            this.getLocalMyReport()
        },
        methods: {
            // 获取缓存
            getLocalMyReport () {
                const list = JSON.parse(localStorage.getItem('formItem'))
                if (list) this.formItem = list
                else {
                    this.formItem = {
                        add_type: '1',	// 新增
                        arrive_type: '1',	// 已到
                        order_arrive_type: '1',	// 预到
                        unarrive_type: '2', // 过期未到
                        callback_type: '1', // 已回访次数
                        uncallback_type: '2' // 过期未回访
                    }
                }
                this.changeName()
            },
            showModal () {
                this.modal = true
            },
            // 取消
            handleDrawerCancel () {
                this.modal = false
            },
            // 监听自定义数据
            handleSubmit () {
                this.modal = false
                this.$emit('configParam', { data: this.formItem, key: this.active })
                this.changeName()
                localStorage.setItem('formItem', JSON.stringify(this.formItem))
            },
            // 我的报表top-6按钮
            actived (num) {
                this.active = num
                this.$emit('topArray', num)
            },
            changeNameList (item, key) {
                let name = '昨日'
                if (key === 'order_arrive_type') name = '明日'
                else name = '昨日'
                return item === '1' ? '今日' : (item === '2' ? name : (item === '3' ? '周' : '月'))
            },
            changeName () {
                const item = this.formItem
                for (let key in item) { this.showDay[key] = this.changeNameList(item[key], key) }
            }
        }
    }
</script>
<style scoped lang="less">
    .ivu-mb {
        cursor: pointer;
        user-select: none;
        .active {
            background-color: #f1f4f0 !important;
        }
    }
  .people {
    line-height: 20px;
    font-size: 16px !important;
    color: #17233d;
    font-weight: 500;
  }
  .ivu-numeral {
    font-size: 30px !important;
    color: #515a6e;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,"\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
    line-height: 1.5;
  }
  .extra {
    position: relative;
    top: -3px;
  }
  .title-iv, .ivu-text-right {
    font-size: 14px;
    color: #515a6e;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,"\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
    line-height: 1.5;
  }
  .font-color{
      color: green !important;
      cursor: default;
  }
  /deep/.ivu-page-header {
      padding: 1px 0 0 0;
      background-color: transparent;
      border-bottom: 0;
  }
    /deep/.ivu-numeral {
        color: #49bf8d;
    }
</style>
